<template>
	<div class="swiper-container">
		<!-- Swiper 容器 -->
		<swiper
			:modules="modules"
			slides-per-view="auto"
			:space-between="16"
			navigation
		>
			<!-- 轮播项 -->
			<swiper-slide
				v-for="(item, index) in bookList"
				:key="index"
				class="book-item"
				@click="hrefTo(item)"
			>
				<div class="image">
					<img :src="item.src" class="slide-image" alt="" />
				</div>
				<div class="text">
					<el-text class="w-105px book-name" truncated>
						{{ item.name }}
					</el-text>
					<el-text class="w-105px book-author" truncated>{{
						item.author
					}}</el-text>
					<el-text class="w-105px book-info" line-clamp="2">{{
						item.info
					}}</el-text>
				</div>
			</swiper-slide>

			<!-- 导航按钮（可选，需配合 navigation 配置） -->
			<template #navigation>
				<div class="swiper-button-prev"></div>
				<div class="swiper-button-next"></div>
			</template>
		</swiper>
	</div>
</template>

<script setup>
import { onMounted, ref } from "vue";
// 引入 Swiper 核心组件和样式
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
// 引入所需模块（按需导入）
import { Navigation } from "swiper/modules";
import { useRouter } from 'vue-router'

const router = useRouter()
// 注册使用的模块
const modules = [Navigation];
const hrefTo = (item) => {
	router.push('/book')
};

const bookList = [
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
		name: "千之熵",
		author: "KOYO",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book2.png", import.meta.url),
		name: "夏的消失点・冬的存在地",
		author: "佐渡遼歌",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book3.jpg", import.meta.url),
		name: "世有扶蘇【民國/架空】",
		author: "時起雲",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
		name: "千之熵",
		author: "KOYO",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book2.png", import.meta.url),
		name: "夏的消失点・冬的存在地",
		author: "佐渡遼歌",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book3.jpg", import.meta.url),
		name: "世有扶蘇【民國/架空】",
		author: "時起雲",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book1.jpg", import.meta.url),
		name: "千之熵",
		author: "KOYO",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book2.png", import.meta.url),
		name: "夏的消失点・冬的存在地",
		author: "佐渡遼歌",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book3.jpg", import.meta.url),
		name: "世有扶蘇【民國/架空】",
		author: "時起雲",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book2.png", import.meta.url),
		name: "夏的消失点・冬的存在地",
		author: "佐渡遼歌",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
	{
		src: new URL("../assets/images/book3.jpg", import.meta.url),
		name: "世有扶蘇【民國/架空】",
		author: "時起雲",
		info: "我不是唯一瘋狂的人，這個世界上幾乎所有人都是瘋子",
	},
];
</script>

<style scoped lang="scss">
.swiper-container {
	max-width: 100%;
	margin: 0 auto;
}
:deep(.swiper-button-prev) {
	color: #ffffff;
	&::after {
		font-size: 34px;
	}
}
:deep(.swiper-button-next) {
	color: #ffffff;
	&::after {
		font-size: 34px;
	}
}

:deep(.swiper-slide) {
	width: 104px !important;
}

.slide-image {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 图片自适应容器，保持比例 */
}

.book-item {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 8px;
	.image {
		img {
			display: block;
			width: 100%;
			height: 147px;
			border-radius: 4px;
		}
	}
	.book-name {
		display: block;
		font-size: 14px;
		font-weight: 500;
		color: #2d3748;
	}
	.book-author {
		font-size: 12px;
		margin: 8px 0;
	}
	.book-info {
		font-size: 12px;
		color: #92aaca;
	}
}
</style>
